<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          * {
            margin: 0;
            padding: 0;
            background-color:white;
        }
         #app{
            margin: 200px auto;
            width: 400px;
            overflow: hidden;
            height: 400px;
            
         } 
         button{
            width: 100px;
            margin: auto;
            border-style: groove;
            background-color: pink;
         }
         button:hover{
            background-color: white;
         }
         P{
            line-height: 400px;font-size:50px;color: red;
            -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 40%, rgba(255, 255, 255, 0.35));
         }
    </style>
</head>
<body>
    <!-- 基于vue实现文字跑马灯效果 -->
    <div id="app">
    <button @click="run">滚动</button>
    <button @click="stop">停止</button>
    <p>{{msg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var vm=new Vue({
            el:'#app',
            data:{
                 msg:'可惜是没有你的四月',                                                                                                            
                 timer:null
            },
            methods:{
                run:function(){
                    if(this.timer!=null){
                        return
                    }
                    this.timer=setInterval(()=>{
                        var start=this.msg.substring(0,1)
                        var end=this.msg.substring(1)
                        this.msg=end + start
                    },1000)
                },
                stop:function(){
                    clearInterval(this.timer)
                    this.timer=null
                }
            }
         })
    </script>
</body>
</html>